<template>
  <van-swipe class="my-swipe" indicator-color="white">
    <van-swipe-item v-for="(page,index) of icon" :key="index">
      <van-grid :border="false" :column-num="4">
        <van-grid-item v-for="(item) of page" :key="item.id">
          <van-image width="50" :src="item.imgUrl" />
          <span style="font-size: 12px" v-text="item.desc"></span>
        </van-grid-item>
      </van-grid>
    </van-swipe-item>
  </van-swipe>
</template>

<script>
    export default {
      name: "iconList",
      props:{
        iconList:{
          type:Array,
          default:false
        }
      },
      data(){
        return{

        }
      },
      computed:{
        icon(){
            let pages = []
            this.iconList.forEach((item,index)=>{
              let page = Math.floor(index / 8)
              console.log(page)
              if (!pages[page]){
                pages[page] = []
              }
              pages[page].push(item)
            })
            return pages
        }
      }
    }

</script>

<style scoped>

</style>
